<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/curriculum.css">

</head>

<body>
  <div class="container">
    <header>
      <!-- 轮播图 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </header>
    <section>
      <!-- 马上学习 -->
      <div class="study">
        <div class="study-title">
          <span class="fast-text">马上学习</span>
          <span class="more searchCurriculum" data-title="apps">更多</span>
        </div>
        <ul class="fast">

        </ul>
      </div>
      <!-- 预约学习 -->
      <div class="study">
        <div class="study-title">
          <span class="fast-text appointment">预约学习</span>
          <span class="more searchCurriculum" data-title="course">更多</span>
        </div>
        <ul id="appointment">

        </ul>
      </div>
    </section>
    <footer>
      <ul>
        <li>
          <a href="index.html">
            <img src="./img/icon_tab_sy_n@2x.png" alt="">
            <span>首页</span>
          </a>
        </li>
        <li>
          <a href="./curriculum.html">
            <img src="./img/icon_tab_zxkc_s@2x.png" alt="">
            <span>在线课程</span>
          </a>
        </li>
        <li>
          <a href="./learning.html">
            <img src="./img/icon_tab_xxlj_n@2x.png" alt="">
            <span>学习路线</span>
          </a>
        </li>
        <li>
          <a href="about.html">
            <img src="./img/icon_tab_gywm_n.png" alt="">
            <span>关于我们</span>
          </a>
        </li>
      </ul>
    </footer>
  </div>
  <script src="./js/flexible.js"></script>
  <script src="./js/swiper-bundle.min.js"></script>
  <script src="./js/zepto.min.js"></script>
  <script src="./js/zepto.touch.js"></script>
  <script src="./js/lazyload.min.js"></script>
  <script>
    $(function () {
      var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
      })

      // 请求banner的数据
      $.ajax({
        url: 'http://39.101.217.150:8075/banner/list',
        type: 'post',
        success: function (data) {
          var datas = data.data;
          $.each(datas, function (index, item) {
            $('.swiper-wrapper').append(
              `
              <div class="swiper-slide">
                <img src="${item.url}" alt="">
              </div>
              `
            )
          })
        }
      })
      // 马上学习接口
      $.ajax({
        url: 'http://39.101.217.150:8075/apps/list',
        data: {
          page: 1,
          size: 4
        },
        success: function (data) {
          var records = data.data.records
          $.each(records, function (index, item) {
            $('.fast').append(`
            <li>
              <img src="${item.imgurl}" alt="">
              <span class="text-overflow">${item.appName}</span>
            </li>
            `)
          })
        }
      })

      // 预约学习接口
      $.ajax({
        url: 'http://39.101.217.150:8075/course/list',
        data: {
          page: 1,
          size: 4
        },
        success: function (data) {
          var records = data.data.records
          // console.log(records);
          $.each(records, function (index, item) {
            $('#appointment').append(`
            <li>
              <img src="${item.imgUrl}" alt="">
              <span class="text-overflow">${item.contentName}</span>
            </li>
            `)
          })
        }
      })

      // 跳转到搜索页
      $('.searchCurriculum').tap(function () {
        // 传递参数
        var title = $(this).attr('data-title')
        window.location.href = 'searchCurriculum.html#' + title + '';
      })

    })
  </script>
</body>

</html>